<template>
  <div class="image-gallery">
    <van-row :gutter="10">
      <van-col
          v-for="(image, index) in displayedImages"
          :key="index"
          span="8"
          class="image-col"
          @click="$previewImage(displayedImages.map(i=>i.src), index)"
      >
        <div class="image-wrapper">
          <img :src="image.src" :alt="image.alt" class="image"/>
          <div v-if="index === 2 && excessCount > 0" class="overlay">
            +{{ excessCount }}
          </div>
        </div>
      </van-col>
    </van-row>
  </div>
</template>

<script>
export default {
  name: 'ImageGallery',
  props: {
    images: {
      type: Array,
      required: true
    }
  },
  computed: {
    displayedImages() {
      return this.images.slice(0, 3);
    },
    excessCount() {
      return this.images.length - 3;
    }
  }
}
</script>

<style lang="scss" scoped>
.image-gallery {
  .image-col {
    position: relative;
    overflow: hidden;

    .image-wrapper {
      position: relative;
      height: 110px;
      .image {
        width: 100%;
        height: 100%;
        border-radius: 8px;
      }

      .overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        border-radius: 8px;
      }
    }
  }
}
</style>
